<template>
  <div class="dashboard-container">
    <div class="health-overview">
      <h2>健康数据总览</h2>
      <div class="chart-container">
        <LineChart :chart-data="lineChartData" />
        <PieChart :chart-data="pieChartData" />
        <BarChart :chart-data="barChartData" />
      </div>
    </div>
    
    <div class="quick-actions">
      <h3>快捷入口</h3>
      <div class="action-grid">
        <RouterLink 
          v-for="item in quickLinks"
          :key="item.path"
          :to="item.path"
          class="action-card"
        >
          <component :is="item.icon" class="action-icon" />
          <span>{{ item.title }}</span>
        </RouterLink>
      </div>
    </div>

    <div class="recent-records">
      <h3>最近记录</h3>
      <el-timeline>
        <el-timeline-item
          v-for="(record, index) in recentRecords"
          :key="index"
          :timestamp="record.date"
        >
          {{ record.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { RouterLink } from 'vue-router';
import LineChart from '@/components/Charts/LineChart.vue';
import PieChart from '@/components/Charts/PieChart.vue';
import { SetUp,User,Document, Calendar, DataAnalysis, FirstAidKit } from '@element-plus/icons-vue';

const lineChartData = ref({
  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  datasets: [{
    label: '心率',
    data: [72, 75, 78, 76, 80, 82, 79],
    borderColor: '#ff6b6b'
  }]
});

const pieChartData = ref({
  labels: ['正常指标', '异常指标'],
  datasets: [{
    data: [85, 15],
    backgroundColor: ['#4CAF50', '#FF5252']
  }]
});

const barChartData = ref({
  labels: ['BMI指数', '体脂率', '基础代谢'],
  datasets: [{
    data: [22.3, 18.5, 1650],
    backgroundColor: ['#ff7675', '#74b9ff', '#55efc4']
  }]
});

const quickLinks = ref([
  { path: '/basic', title: '健康指标', icon: Document },
  { path: '/medication', title: '用药记录', icon: FirstAidKit },
  { path: '/medical-history', title: '既往病史', icon: DataAnalysis },
  { path: '/check-up', title: '体检报告', icon: Calendar },
  { path: '/allergy-history', title: '过敏史', icon: User },
  { path: '/family-history', title: '家族病史', icon: SetUp },

]);

const recentRecords = ref([
  { date: '2024-03-15 08:30', content: '更新了血压测量数据：120/80 mmHg' },
  { date: '2024-03-14 15:20', content: '添加了新用药记录：阿司匹林 100mg' },
  { date: '2024-03-13 10:00', content: '上传了最新体检报告PDF文件' }
]);
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.quick-actions {
  margin: 30px 0;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.action-card {
  padding: 20px;
  border-radius: 8px;
  background: #f8f9fa;
  text-align: center;
  transition: transform 0.3s ease;
  color: #2c3e50;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #2980b9;
}

.recent-records {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>